<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<uni-header></uni-header>
		<!-- #endif -->

		<view class="product-box com-box">
			<view class="h2-header">
				<text class="h2-ttl">发布商品</text>
			</view>

			<view class="row">
				<text class="tit">产品名称</text>
				<input class="input" type="text" v-model="goodsName" placeholder="请填写产品名称" />
			</view>
			<view class="row">
				<text class="tit">分类目录</text>
				<picker class="tip" mode="multiSelector" @columnchange="categoryChange" :value="categoryIndex" :range="category">
					<view class="uni-input">
						<text>{{category[0][categoryIndex[0]]}}>{{category[1][categoryIndex[1]]}}>{{category[2][categoryIndex[2]]}}</text>
						<text class="icon icon-arrow_right"></text>
					</view>
				</picker>
			</view>
			<view class="row">
				<text class="tit">品牌名称</text>
				<input class="input" type="text" v-model="brandName" placeholder="请填写品牌名称" />
			</view>
			<view class="row">
				<text class="tit">价格/元</text>
				<input class="input" type="number" v-model="price" placeholder="请填写价格/元" />
			</view>
			<view class="row">
				<text class="tit">保证金</text>
				<input class="input" type="number" v-model="depositRatio" placeholder="请填写保证金比例/%" />
			</view>
			<view class="row">
				<text class="tit">发货方式</text>
				<picker class="tip" @change="sendWayChange" :value="sendWay" :range="sendWay">
					<view class="uni-input">
						<text>{{sendWay[sendWayIndex]}}</text>
						<text class="icon icon-arrow_right"></text>
					</view>
				</picker>
			</view>
			<view class="row">
				<text class="tit">配送费 </text>
				<input class="input" type="number" v-model="deliverMoney" placeholder="请填写配送费/元" />
			</view>
			<view class="row">
				<text class="tit">库存</text>
				<input class="input" type="number" v-model="stock" placeholder="请填写库存" />
			</view>

			<view class="row">
				<text class="tit">规格参数</text>
				<input class="input" type="text" v-model="specification" placeholder="请填写规格参数" />
			</view>
			<view class="row area-row">
				<text class="tit">商品描述</text>
				<textarea placeholder-style="color:#999" placeholder="请输入商品描述" auto-height maxlength="250" v-model="description"></textarea>
			</view>

			<view class="row">
				<text class="tit">生产商</text>
				<input class="input" type="text" v-model="producer" placeholder="请填写生产商" />
			</view>
			<view class="row">
				<text class="tit">生产地</text>
				<input class="input" type="text" v-model="origin" placeholder="请填写生产地" />
			</view>
			<view class="row">
				<text class="tit">存放地</text>
				<input class="input" type="text" v-model="storage" placeholder="请填写存放地" />
			</view>
			<view class="row">
				<text class="tit">出厂日期</text>
				<view class="value">
					<date-time-picker placeholder="请填写出厂日期" fields="hour" old @change="factoryDateTime"></date-time-picker>
				</view>
			</view>
			<view class="row">
				<text class="tit">截止日期</text>
				<view class="value">
					<date-time-picker placeholder="请填写截止日期" fields="hour" @change="endDateTime"></date-time-picker>
				</view>
			</view>
			<view class="row">
				<text class="tit">技术标准</text>
				<input class="input" type="text" v-model="technicalStandard" placeholder="请填写技术标准" />
			</view>
			<view class="row">
				<text class="tit">质量等级</text>
				<picker class="tip" @change="qualityLevelChange" :value="qualityLevel" :range="qualityLevel">
					<view class="uni-input">
						<text>{{qualityLevel[qualityLevelIndex]}}</text>
						<text class="icon icon-arrow_right"></text>
					</view>
				</picker>
			</view>
			<view class="row">
				<text class="tit">包装方式</text>
				<picker class="tip" @change="packingChange" :value="packing" :range="packing">
					<view class="uni-input">
						<text>{{packing[packingIndex]}}</text>
						<text class="icon icon-arrow_right"></text>
					</view>
				</picker>
			</view>

			<view class="h2-header">
				<text class="h2-ttl">商品图片</text>
			</view>

			<view class="row area-row">
				<uni-upimg @change="getImageInfo" :upimg_preview="goodsPicList" :upload_count="5"></uni-upimg>
			</view>

			<button type="primary" class="add-btn" @click="confirm">{{id?'确认修改':'确认发布'}}</button>
		</view>

		<!-- #ifdef H5 -->
		<uni-footer></uni-footer>
		<!-- #endif -->
	</view>
</template>

<script>
	import dateTimePicker from '@/components/uni-datetime-picker.vue'
	import uniUpimg from '@/components/uni-upimg.vue'
	import uniHeader from '@/components/h5/uni-header.vue'
	import uniFooter from '@/components/h5/uni-footer.vue'
	export default {
		components: {
			dateTimePicker,
			uniUpimg,
			uniHeader,
			uniFooter
		},
		data() {
			return {
				id: '',
				goodsName: '',
				brandName: '',
				price: '',
				depositRatio: '',
				stock: '',
				specification: '',
				description: '',
				producer: '',
				origin: '',
				storage: '',
				factoryTime: '',
				endTime: '',
				technicalStandard: '',
				qualityLevel: ['优等', '合格', '等外'],
				qualityLevelIndex: 0,
				packing: ['25kg/袋', '1吨/袋'],
				packingIndex: 0,
				categoryList: [],
				category: [[], [], []],
				categoryIndex: [0, 1, 1],
				category3Id: '',
				sendWay: ['整车配送', '物流配送'],
				sendWayIndex: 0,
				deliverMoney: '',
				goodsPicList: [],
			}
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id
				this.$api.request('/zrGoods/getGoodsInfo', {
					id: option.id,
				}, {
					content: 'application/x-www-form-urlencoded',
				}).then(res => {
					let item = res.data
					this.goodsName = item.goodsName
					this.ategory3Id = item.category3Id
					this.brandName = item.brandName
					this.goodsPicList = item.goodsPicList
					this.price = item.price
					this.depositRatio = item.depositRatio
					this.sendWayIndex = parseInt(item.deliver)
					this.deliverMoney = item.deliverMoney
					this.stock = item.stock
					this.specification = item.specification
					this.description = item.description
					this.producer = item.producer
					this.origin = item.origin
					this.storage = item.storage
					this.technicalStandard = item.technicalStandard
					this.qualityLevelIndex = parseInt(item.qualityLevel)
					this.packingIndex = parseInt(item.packing)
				})
			}
			this.$api.request('/categoty/getTotal', {}, {
				method: 'GET'
			}).then(res => {
				this.categoryList = res.data
				this.category[0] = this.categoryList.map(item => item.name)
				this.category[1] = this.categoryList[0].twoList.map(item => item.name)
				this.category[2] = this.categoryList[0].twoList[0].threeList.map(item => item.name)
				console.log(this.category[0])
				console.log(this.category[1])
				console.log(this.category[2])
				this.category3Id = this.categoryList[this.categoryIndex[0]].twoList[this.categoryIndex[1]].threeList[this.categoryIndex[
					2]].id
			})
		},
		methods: {
			categoryChange(e) {
				const column = e.detail.column
				const value = e.detail.value
				this.categoryIndex[column] = value
				// console.log(column + ':' + value) //列 + 值
				switch (column) {
					case 0: //拖动第1列
						this.category[1] = this.categoryList[value].twoList.map(item => item.name)
						this.category[2] = this.categoryList[value].twoList[0].threeList.map(item => item.name)
						this.categoryIndex.splice(1, 1, 0)
						this.categoryIndex.splice(2, 1, 0)
						break
					case 1: //拖动第2列
						this.category[2] = this.categoryList[this.categoryIndex[0]].twoList[value].threeList.map(item => item.name)
						this.categoryIndex.splice(2, 1, 0)
						break
				}
				this.category3Id = this.categoryList[this.categoryIndex[0]].twoList[this.categoryIndex[1]].threeList[this.categoryIndex[
					2]].id
				// console.log(this.category3Id)
				this.$forceUpdate()
			},
			factoryDateTime(date) {
				this.factoryTime = date.year + '-' + date.month2 + '-' + date.day2 + ' ' + date.hour2
				// console.log(this.factoryTime)
			},
			endDateTime(date) {
				this.endTime = date.year + '-' + date.month2 + '-' + date.day2 + ' ' + date.hour2
				// console.log(this.endTime)
			},
			qualityLevelChange(e) {
				this.qualityLevelIndex = e.target.value
			},
			packingChange(e) {
				this.packingIndex = e.target.value
			},
			sendWayChange(e) {
				this.sendWayIndex = e.target.value
			},
			getImageInfo(e) {
				this.goodsPicList = e
				// console.log(this.goodsPicList)
			},
			//提交
			confirm() {
				if (!this.goodsName) {
					this.$api.msg('请填写产品名称')
					return
				}
				if (!this.brandName) {
					this.$api.msg('请填写品牌名称')
					return
				}
				if (!this.goodsPicList[0]) {
					this.$api.msg('请上传商品图')
					return
				}
				if (!this.price) {
					this.$api.msg('请填写商品价格')
					return
				}
				if (!this.depositRatio) {
					this.$api.msg('请填写保证金比例')
					return
				}
				if (!this.deliverMoney) {
					this.$api.msg('请填写配送费')
					return
				}
				if (!this.stock) {
					this.$api.msg('请填写库存')
					return
				}
				if (!this.specification) {
					this.$api.msg('请填写规格参数')
					return
				}
				if (!this.description) {
					this.$api.msg('请填写商品描述')
					return
				}
				if (!this.producer) {
					this.$api.msg('请填写生产商')
					return
				}
				if (!this.origin) {
					this.$api.msg('请填写生产地')
					return
				}
				if (!this.storage) {
					this.$api.msg('请填写存放地')
					return
				}
				if (!this.factoryTime) {
					this.$api.msg('请填写出厂日期')
					return
				}
				if (!this.endTime) {
					this.$api.msg('请填写截止日期')
					return
				}
				let postUrl = '/zrGoods/addGoods'
				if (this.id) {
					postUrl = '/zrGoods/updateGoods'
				}
				this.$api.request(postUrl, {
					id: this.id,
					goodsName: this.goodsName,
					category3Id: this.category3Id,
					brandName: this.brandName,
					goodsPicList: this.goodsPicList,
					price: this.price,
					depositRatio: this.depositRatio,
					deliver: this.sendWayIndex.toString(),
					deliverMoney: this.deliverMoney,
					stock: this.stock,
					specification: this.specification,
					description: this.description,
					producer: this.producer,
					origin: this.origin,
					storage: this.storage,
					factoryTime: this.factoryTime,
					endTime: this.endTime,
					technicalStandard: this.technicalStandard,
					qualityLevel: this.qualityLevelIndex.toString(),
					packing: this.packingIndex.toString()
				}).then(res => {
					this.$api.prePage().loadData('refresh')
					uni.navigateBack()
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		padding-top: 20upx;
	}

	.row {
		.tit {
			width: 150upx;
		}

		.tip {
			flex-basis: 100%;
		}

		.uni-input {
			display: flex;
			justify-content: space-between;
		}

		textarea {
			flex: 1;
			width: auto;
			font-size: $base-font-base;
			color: $base-color-dark;
			line-height: 38upx;
		}
	}

	.area-row {
		height: inherit;
		padding: 30upx $base-row-spacing;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		page {
			padding-top: 0;
		}

		.product-box {
			margin: 20px auto;
		}

		.row {
			.tit {
				width: 150px;
			}

			textarea {
				font-size: 16px;
				line-height: inherit;
			}
		}

		.area-row {
			height: inherit;
			padding: 14px 30px;
		}
	}

	/* #endif */
</style>
